<!--
 * @Descripttion: 成员登记
 * @version: 1.0
 * @Author: 狸猫
 * @Date: 2023-11-25 14:29:36
 * @LastEditors: 狸猫
 * @LastEditTime: 2024-01-08 15:47:35
-->
<template>
  <div class="content">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1000px"
      append-to-body
      :before-close="close"
    >
      <el-descriptions title="订单信息">
        <el-descriptions-item label="承租人"
          >{{ orderInfo.reservationName }}/{{
            orderInfo.reservationPhone
          }}</el-descriptions-item
        >
        <el-descriptions-item label="证件号">{{
          orderInfo.reservationCardNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="房间">{{
          orderInfo.fullAddress
        }}</el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" v-if="!isEdit" size="mini" @click="addMember"
        >新增成员</el-button
      >
      <el-form ref="form" :model="form" :inline="true">
        <div
          v-for="(item, index) in form.communityHouseUserList"
          :key="index"
          class="member-item"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="姓名"
                :prop="'communityHouseUserList.' + index + '.userName'"
                :rules="[
                  { required: true, message: '请输入姓名', trigger: 'blur' },
                ]"
              >
                <el-input
                  v-model="item.userName"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="手机"
                :prop="'communityHouseUserList.' + index + '.userMobile'"
                :rules="rules.reservationPhone"
              >
                <el-input
                  v-model="item.userMobile"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="身份证"
                :prop="'communityHouseUserList.' + index + '.cardNumber'"
                :rules="rules.cardNumber"
              >
                <el-input
                  v-model="item.cardNumber"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item
                label="关系"
                :prop="'communityHouseUserList.' + index + '.relationTagType'"
                :rules="[
                  { required: true, message: '请选择关系', trigger: 'change' },
                ]"
              >
                <el-select
                  v-model="item.relationTagType"
                  placeholder="请选择"
                  clearable
                  style="width: 120px"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                >
                  <el-option
                    v-for="dict in dict.type.dict_relation_tag_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否重点关注" label-width="100px">
                <el-switch
                  v-model="item.emphasisPersonnelStatus"
                  active-value="1"
                  inactive-value="0"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否查看账单" label-width="100px">
                <el-switch
                  v-model="item.checkBillStatus"
                  active-value="1"
                  inactive-value="0"
                  :disabled="checkoutDisabled(item.communityHouseUserId)"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-tag type="primary">同住人</el-tag>
            </el-col>
          </el-row>
          <i
            @click="delMember(item, index)"
            class="el-icon-delete"
            style="
              font-size: 24px;
              margin-top: 5px;
              color: #e43f32;
              cursor: pointer;
              text-align: center;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 20px;
            "
          ></i>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import formRule from "@/utils/formRule.js";
import { getOrder } from "@/api/order/order";
import {
  addMember,
  communityHouseUserList,
  delMember,
  editMember,
} from "@/api/order/member";
export default {
  name: "memberEdit",
  dicts: ["dict_relation_tag_type"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    order: {
      type: Object,
      default: {},
    },
    orderId: {
      type: String,
      default: "",
    },
    // 是否为编辑操作
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "成员登记",
      orderInfo: {},
      form: {
        communityHouseUserList: [],
      },
      rules: {
        reservationPhone: [
          { required: true, message: "请输入手机", trigger: "blur" },
          {
            validator: formRule.phone,
            message: "",
            trigger: ["change", "blur"],
          },
        ],
        cardNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            validator: formRule.IDCard,
            message: "",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  created() {
    this.getDetail();
    this.getmemberList();
    if (this.isEdit) {
      this.title = "编辑成员";
    }
  },
  methods: {
    checkoutDisabled(communityHouseUserId) {
      if (!this.isEdit && communityHouseUserId != "") {
        return true;
      } else {
        return false;
      }
    },
    //删除成员
    delMember(row, index) {
      const that = this;
      if (row.communityHouseUserId) {
        that
          .$confirm("确定要删除此成员吗？删除后不可恢复", "删除成员", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            delMember(row.communityHouseUserId).then(() => {
              that.$message.success("删除成员成功");
              that.getmemberList();
            });
          })
          .catch(() => {
            that.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.form.communityHouseUserList.splice(index, 1);
      }

      //;
    },
    //订单信息
    getDetail() {
      getOrder(this.order.orderId).then((response) => {
        this.orderInfo = response.data;
      });
    },
    //成员列表
    getmemberList() {
      communityHouseUserList(this.order.houseId).then((response) => {
        this.form.communityHouseUserList = response.data;
      });
    },
    onSubmit() {
      let that = this;
      if (
        this.form.communityHouseUserList.some(function checknumber(item) {
          return item.cardNumber == that.orderInfo.reservationCardNumber;
        })
      ) {
        this.$message({
          message: "身份证号和承租人重复",
          type: "warning",
        });
        return false;
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let addList = this.form.communityHouseUserList.filter(
            (person) => person.communityHouseUserId == ""
          );
          if (this.isEdit) {
            editMember(this.form.communityHouseUserList).then((res) => {
              this.$message.success("修改成员成功");
              this.close();
            });
          } else {
            if (addList.length != 0) {
              addMember(addList).then((res) => {
                this.$message.success("新增成员成功");
                this.close();
              });
            } else {
              this.close();
            }
          }
        } else {
          return false;
        }
      });
    },
    close() {
      this.$emit("closeeldialog");
    },
    //新增成员
    addMember() {
      this.form.communityHouseUserList.push({
        communityHouseUserId: "",
        houseId: this.order.houseId,
        estateId: this.order.estateId,
        userType: "2", //成员类型：1承租人；2同住人
        userName: "",
        cardNumber: "",
        userMobile: "",
        relationTagType: null,
        checkBillStatus: "0", //是否查看账单状态：0否；1是
        emphasisPersonnelStatus: "0", //重点关注人群：0否；1是
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.member-item {
  border: 1px solid #999;
  padding: 10px;
  border-radius: 4px;
  margin-top: 20px;
  position: relative;
}
</style>
